<template>
    <div class="app-container">
        <el-row>
            <el-form :model="searchParams" ref="searchParams" :inline="true">
                <el-form-item label="学校名称">
                    <el-input class="input" v-model="searchParams.school_name" maxlength='20' placeholder="请输入" clearable
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input class="input" v-model="searchParams.realname" maxlength='20' placeholder="请输入" clearable
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSearch" type="primary" icon="el-icon-search"
                        style="margin-left:40px">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-form :inline="true" style="margin:10px 0">
                <el-button @click="operateAction('create', {})" type="primary" plain size='small'>新增</el-button>
                <el-button @click="operateAction('delete', {})" type="info" plain size='small'>删除</el-button>
            </el-form>
            <el-table :data="dataList" size='medium' ref="multipleTable" @selection-change="handleSelectionChange"
                border>
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="id" width="80" show-overflow-tooltip></el-table-column>
                <el-table-column prop="checkStatus" label="审核状态" show-overflow-tooltip>
                    <template slot-scope="{row, index}">
                        <el-tag v-if="row.checkStatus=='PASS'">通过</el-tag>
                        <el-tag v-if="row.checkStatus=='REFUSE'" type="info">未通过</el-tag>
                        <el-tag v-if="row.checkStatus=='CHECKING'" type="success">审核中</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="typesLabel" label="类型" show-overflow-tooltip></el-table-column>
                <el-table-column prop="realname" label="姓名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="电话" show-overflow-tooltip></el-table-column>
                <el-table-column prop="school_name" label="学校" show-overflow-tooltip></el-table-column>
                <el-table-column prop="dept_name" label="系部" show-overflow-tooltip></el-table-column>
                <el-table-column prop="stu_id" label="学号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="id_card" label="身份证号" show-overflow-tooltip></el-table-column>
                <el-table-column prop="userModel.username" label="用户名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="200">
                    <template slot-scope="{row, index}">
                        {{ formatTime.dateFormat('YY-MM-DD hh:mm:ss', row.createTime) }}
                    </template>
                </el-table-column>
                <el-table-column prop="redact" label="操作" fixed="right" width="120">
                    <template slot-scope="{ row, index }">
                        <el-button type="text" @click="operateAction('update', row)" size='medium'>修改</el-button>
                        <el-button type="text" @click="operateAction('detail', row)" size='medium'>详情</el-button>
                        <el-button type="text" @click="operateAction('check', row)" size='medium'>审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination style="background: #ffffff; height: 50px" v-show="totalSize > 0" :total="totalSize"
                :page.sync="page" :limit.sync="size" @pagination="getDataList" />
        </el-row>
    </div>
</template>
<script>
import { formData } from './data'
export default {
    data() {
        return {
            page: 1,
            size: 10,
            totalSize: 0,
            dataList: [],
            searchParams: {},
            multipleSelection: [],
            formData

        }
    },
    created() {
            if (this.$route.query.currentSearchParams) {
            this.searchParams = JSON.parse((decodeURIComponent(this.$route.query.currentSearchParams)))
            this.page = this.searchParams.page
        }
        this.getDataList()
    },
    methods: {
        
        handleSearch() {
            this.page = 1
            this.getDataList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        operateAction(scene, row) {
            switch (scene) {
                case 'create':
                    this.$router.push({ name: 'Update', query: { formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name } })
                    break;
                case 'update':
                    this.$router.push({ name: 'Update', query: { rowId: row.id, formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name, currentSearchParams: encodeURIComponent(JSON.stringify(this.searchParams)) } })
                    break;
                case 'detail':
                    this.$router.push({ name: 'Detail', query: { rowId: row.id, formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name, currentSearchParams: encodeURIComponent(JSON.stringify(this.searchParams)) } })
                    break;
                case 'check':
                    this.$router.push({ name: 'Detail', query: { rowId: row.id, formData: encodeURIComponent(JSON.stringify(this.formData)), currentRouteName: this.$route.name, currentSearchParams: encodeURIComponent(JSON.stringify(this.searchParams)), type: 'check' } })
                    break;
                case 'delete':
                    if (this.multipleSelection.length <= 0) {
                        this.$message({
                            message: '请选择操作行',
                            type: 'info'
                        })
                    } else {
                        var rowIds = this.multipleSelection.map(function (item) {
                            return item.id
                        })
                        var _this = this
                        this.$confirm('是否确认删除选中的' + rowIds.length + '条记录?', "警告", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(function () {
                            return _this.request_post(_this.formData.deleteUrl,{
                                obj_ids: rowIds
                            }).then(res => {
                                if (res.data.code == 10000) {
                                    _this.getDataList()
                                    _this.$message({
                                        message: '操作成功',
                                        type: 'success'
                                    })
                                }
                            })
                        })
                    }
                    break;
                default:
                    break;
            }
        },
        //数据请求-----------------------------------------------
        // 获取列表数据
        getDataList() {
            this.searchParams.page = this.page
            this.searchParams.size = this.size
            this.request_get(this.formData.getListUrl, this.searchParams).then(res => {
                if (res.data.code == 10000) {
                    this.totalSize = res.data.data.total_count
                    this.dataList = res.data.data.list
                }
            });
        }
    }
}

</script>